<template>
  <div>
    <div class="choseLappingText">
      <van-field
        :value="activeText[0]"
        :border="false"
        readonly
        @click="handleSelectField(0)"
        placeholder="请选择交叉条件一"
        :class="selectLappingBlur === 0 ? 'firstLapping selectSecendLapping' : 'firstLapping'"
      />
      <div @click="handleChangeIndex" class="qiehuan_container">
        <svg-icon icon="qiehuan" class="qiehuan"></svg-icon>
      </div>
      <van-field
        :value="activeText[1]"
        readonly
        :border="false"
        placeholder="请选择交叉条件二"
        @click="handleSelectField(1)"
        :class="selectLappingBlur === 1 ? 'firstLapping selectSecendLapping' : 'firstLapping'"
      />
    </div>
    <div class="overlapping">
      <van-tree-select
        :items="pupValue"
        :main-active-index="mainActiveIndex"
        :active-id="activeId"
        @click-nav="onClickNav"
        @click-item="onClickItem"
      />
      <div class="overlappingButtonGroup">
        <van-button type="default" @click="handleCancel" class="overlappingButton">取消</van-button>
        <van-button
          plain
          type="info"
          @click="handleDetermine"
          class="overlappingButton"
          :disabled="activeId[0] && activeId[1] ? false : true"
          >确定</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    curData: {
      type: Object,
      default: () => {}
    },
    pupValue: {
      type: Array,
      default: () => []
    },
    buttonType: {
      type: String,
      default: () => ''
    }
  },
  data() {
    return {
      mainActiveIndex: 0,
      activeId: [], // 选中id
      activeText: [], // 选中文字
      overlappingFirst: '',
      overlappingSecend: '',
      selectLappingBlur: 0 // 选中时颜色变化，变为选中状态
    }
  },
  methods: {
    // 选中左侧维度
    onClickNav(detail) {
      this.mainActiveIndex = detail
    },
    // 点击第一个维度选项
    handleSelectField(index) {
      this.selectLappingBlur = index
    },
    // 点击右侧子维度
    onClickItem(detail) {
      const index = this.activeId.indexOf(detail.id)
      if (index > -1) {
        /** 已存在就替换，选中框等于长度*/
        this.activeId.splice(index, 1, '')
        this.activeText.splice(index, 1, '')
        this.selectLappingBlur = index
        return
      } else if (this.activeId.length < 2) {
        /** this.activeId数组不能超过选中二个*/
        this.activeId.push(detail.id)
        this.activeText.push(detail.text)
        // 根据数组长度判断选中状态颜色
        if (this.activeId.length === 0) {
          this.selectLappingBlur = 0
        } else if (this.activeId.length > 0) {
          this.selectLappingBlur = 1
        }
      } else if (this.activeId.length >= 2) {
        this.activeId.splice(this.selectLappingBlur, 1, detail.id)
        this.activeText.splice(this.selectLappingBlur, 1, detail.text)
        if (!this.activeId[1] && this.selectLappingBlur === 0) {
          this.selectLappingBlur = 1
        }
      }
    },
    // 点击确定按钮
    handleDetermine() {
      const overlappingFields = [
        { name: this.activeText[0], code: this.activeId[0] },
        { name: this.activeText[1], code: this.activeId[1] }
      ]
      this.$emit('overLappingDetermine', false, overlappingFields)
      this.activeId = [] // 选中id清空
      this.activeText = [] // 选中文字清空
      this.mainActiveIndex = 0 // 回到默认第一个选项
    },
    // 点击取消按钮
    handleCancel() {
      this.activeId = []
      this.activeText = []
      this.mainActiveIndex = 0
      this.$emit('closepup', false)
    },
    // 点击交叉按钮
    handleChangeIndex() {
      this.activeId = this.activeId.reverse()
      this.activeText = this.activeText.reverse()
    }
  },
  watch: {
    curData: {
      deep: true,
      immediate: true,
      handler(newVal, oldVal) {
        if (this.buttonType === 'modifyButton' && newVal.operation === 'pivot') {
          const activeIdTemp = newVal.detailContent.fields.filter(m => m.role === 'dim').map(m => m.refCode)
          const activeTextTemp = newVal.detailContent.fields.filter(m => m.role === 'dim').map(m => m.name)
          this.activeId = [...activeIdTemp]
          this.activeText = [...activeTextTemp]
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.choseLappingText {
  display: flex;
  justify-content: space-around;
  padding: 0px 12px 14px;
  .firstLapping {
    height: 40px;
    width: 148px;
    border-radius: 2px;
    background-color: transparent;
    border: 1px solid $light-grey;
  }
  .secondLapping {
    height: 40px;
    width: 148px;
    border-radius: 2px;
    background-color: transparent;
    border: 1px solid $light-grey;
  }
  .selectSecendLapping {
    border: 1px solid #fff;
  }
  .qiehuan_container {
    margin: auto 0px;
    .qiehuan {
      height: 24px;
      width: 24px;
    }
  }

  /deep/.van-field__control {
    color: #fff;
  }
}

.overlapping {
  width: 100vw;
  /deep/.van-tree-select {
    height: 30vh !important;
    // padding: 0px 10px;
  }
  /deep/.van-sidebar-item {
    background-color: transparent;
  }
  /deep/.van-tree-select__nav-item {
    color: rgba(255, 255, 255, 0.72);
  }
  /deep/.van-tree-select__content {
    background: $dark-grey;
  }
  /deep/.van-tree-select__nav {
    background: $light-bc;
  }
  /deep/.van-sidebar-item--select,
  .van-sidebar-item--select:active {
    background-color: $dark-grey;
    color: rgba(255, 255, 255, 1);
  }

  /deep/.van-tree-select__item {
    color: rgba(255, 255, 255, 0.72);
  }
  /deep/.van-tree-select__item--active {
    color: rgba(255, 255, 255, 1);
  }
  .labelOverlapping {
    display: flex;
    justify-content: space-between;
    height: 70px;
    line-height: 70px;
    background-color: rgba(28, 30, 72, 1);
  }
  .overlappingButtonGroup {
    display: flex;
    justify-content: space-between;
    padding: 10px 20px 13px 20px;
    .overlappingButton {
      color: #fff;
      width: 160px;
      height: 48px;
      font-size: 16px;
    }
  }
}
</style>
